<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MiaoMa 类型映射流程演示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            font-weight: 300;
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .demo-container {
            padding: 40px;
        }

        .mapping-flow {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 20px;
            margin-bottom: 40px;
            align-items: center;
        }

        .flow-step {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
        }

        .flow-step:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            border-color: #667eea;
        }

        .flow-step.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
            transform: scale(1.05);
        }

        .flow-step h3 {
            font-size: 1rem;
            margin-bottom: 10px;
            color: #495057;
        }

        .flow-step.active h3 {
            color: white;
        }

        .flow-step .step-content {
            font-size: 0.9rem;
            color: #6c757d;
            line-height: 1.4;
        }

        .flow-step.active .step-content {
            color: rgba(255, 255, 255, 0.9);
        }

        .arrow {
            font-size: 1.5rem;
            color: #667eea;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        .demo-section {
            margin: 40px 0;
            padding: 30px;
            background: #f8f9fa;
            border-radius: 15px;
            border-left: 5px solid #667eea;
        }

        .demo-section h2 {
            color: #495057;
            margin-bottom: 20px;
            font-size: 1.5rem;
        }

        .sql-input {
            background: #2d3748;
            color: #a0aec0;
            padding: 20px;
            border-radius: 10px;
            font-family: 'Courier New', monospace;
            margin: 20px 0;
            border: none;
            width: 100%;
            font-size: 14px;
            line-height: 1.5;
        }

        .type-mapping-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .type-mapping-table th,
        .type-mapping-table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
        }

        .type-mapping-table th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-weight: 500;
        }

        .type-mapping-table tr:hover {
            background: #f8f9fa;
        }

        .ui-preview {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 30px 0;
        }

        .form-preview,
        .table-preview {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .form-preview h3,
        .table-preview h3 {
            color: #495057;
            margin-bottom: 20px;
            font-size: 1.2rem;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }

        .form-field {
            margin: 15px 0;
        }

        .form-field label {
            display: block;
            margin-bottom: 5px;
            color: #495057;
            font-weight: 500;
        }

        .form-field input,
        .form-field select,
        .form-field textarea {
            width: 100%;
            padding: 10px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .form-field input:focus,
        .form-field select:focus,
        .form-field textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .table-preview table {
            width: 100%;
            border-collapse: collapse;
        }

        .table-preview th,
        .table-preview td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
        }

        .table-preview th {
            background: #f8f9fa;
            font-weight: 500;
            color: #495057;
        }

        .controls {
            text-align: center;
            margin: 30px 0;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            margin: 0 10px;
            transition: all 0.3s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .type-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
            margin: 2px;
        }

        .type-badge.mysql { background: #e3f2fd; color: #1976d2; }
        .type-badge.miaoma { background: #f3e5f5; color: #7b1fa2; }
        .type-badge.java { background: #fff3e0; color: #f57c00; }
        .type-badge.ts { background: #e8f5e8; color: #388e3c; }
        .type-badge.vue { background: #e1f5fe; color: #0277bd; }

        .highlight {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .mapping-flow {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .ui-preview {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .demo-container {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎯 MiaoMa 类型映射流程演示</h1>
            <p>从数据库字段到UI组件的完整映射链路可视化</p>
        </div>

        <div class="demo-container">
            <!-- 映射流程图 -->
            <div class="mapping-flow">
                <div class="flow-step" id="step1">
                    <h3>1. SQL字段定义</h3>
                    <div class="step-content">
                        解析SQL CREATE TABLE语句中的字段定义
                    </div>
                </div>
                
                <div class="arrow">→</div>
                
                <div class="flow-step" id="step2">
                    <h3>2. MySQL类型</h3>
                    <div class="step-content">
                        提取MySQL原生数据类型
                    </div>
                </div>
                
                <div class="arrow">→</div>
                
                <div class="flow-step" id="step3">
                    <h3>3. MiaoMa类型</h3>
                    <div class="step-content">
                        转换为MiaoMa统一类型系统
                    </div>
                </div>
                
                <div class="arrow">→</div>
                
                <div class="flow-step" id="step4">
                    <h3>4. 目标语言类型</h3>
                    <div class="step-content">
                        映射到Java/TypeScript等类型
                    </div>
                </div>
                
                <div class="arrow">→</div>
                
                <div class="flow-step" id="step5">
                    <h3>5. UI组件</h3>
                    <div class="step-content">
                        生成对应的前端UI组件
                    </div>
                </div>
            </div>

            <!-- SQL输入演示 -->
            <div class="demo-section">
                <h2>📝 SQL字段定义示例</h2>
                <textarea class="sql-input" id="sqlInput" rows="10">CREATE TABLE t_user (
    id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '用户ID',
    email VARCHAR(254) NOT NULL COMMENT '用户邮箱',
    phone VARCHAR(11) COMMENT '手机号码',
    age INT COMMENT '年龄',
    balance DECIMAL(10,2) DEFAULT 0.00 COMMENT '账户余额',
    birthday DATE COMMENT '生日',
    is_active TINYINT(1) DEFAULT 1 COMMENT '是否激活',
    avatar TEXT COMMENT '头像URL',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间'
);</textarea>
                
                <div class="controls">
                    <button class="btn" onclick="startDemo()">🚀 开始演示映射过程</button>
                    <button class="btn" onclick="resetDemo()">🔄 重置演示</button>
                </div>
            </div>

            <!-- 类型映射表 -->
            <div class="demo-section">
                <h2>🔄 类型映射对照表</h2>
                <table class="type-mapping-table" id="mappingTable">
                    <thead>
                        <tr>
                            <th>字段名</th>
                            <th>SQL类型</th>
                            <th>MiaoMa类型</th>
                            <th>Java类型</th>
                            <th>TypeScript类型</th>
                            <th>Vue组件</th>
                        </tr>
                    </thead>
                    <tbody id="mappingTableBody">
                        <!-- 动态生成 -->
                    </tbody>
                </table>
            </div>

            <!-- UI预览 -->
            <div class="demo-section">
                <h2>🎨 UI界面预览</h2>
                <div class="ui-preview">
                    <div class="form-preview">
                        <h3>📋 表单界面</h3>
                        <div id="formPreview">
                            <!-- 动态生成表单字段 -->
                        </div>
                    </div>
                    
                    <div class="table-preview">
                        <h3>📊 表格界面</h3>
                        <div id="tablePreview">
                            <!-- 动态生成表格 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 扩展类型演示 -->
            <div class="demo-section">
                <h2>🔧 扩展类型系统</h2>
                <p>MiaoMa支持通过标记语言指定扩展类型，提供更精确的业务语义：</p>
                <textarea class="sql-input" rows="6">-- 使用标记语言指定扩展类型
-- @field-type-mark email 254
email VARCHAR(254) NOT NULL COMMENT '用户邮箱',

-- @field-type-mark telephone-cn
phone VARCHAR(11) COMMENT '手机号码',

-- @field-type-mark money CNY 2
balance DECIMAL(10,2) DEFAULT 0.00 COMMENT '账户余额'</textarea>
            </div>
        </div>
    </div>

    <script>
        // 类型映射数据
        const typeMappings = [
            {
                field: 'id',
                sql: 'BIGINT AUTO_INCREMENT',
                miaoma: 'MIAOMA_BASE_BIGINT',
                java: 'Long',
                typescript: 'number',
                vue: 'a-input-number',
                formType: 'number',
                readonly: true
            },
            {
                field: 'email',
                sql: 'VARCHAR(254)',
                miaoma: 'MIAOMA_EXTENDED_EMAIL',
                java: 'String',
                typescript: 'string',
                vue: 'a-input',
                formType: 'email',
                placeholder: '请输入邮箱地址'
            },
            {
                field: 'phone',
                sql: 'VARCHAR(11)',
                miaoma: 'MIAOMA_EXTENDED_TELEPHONE_CN',
                java: 'String',
                typescript: 'string',
                vue: 'a-input',
                formType: 'tel',
                placeholder: '请输入手机号码'
            },
            {
                field: 'age',
                sql: 'INT',
                miaoma: 'MIAOMA_BASE_INTEGER',
                java: 'Integer',
                typescript: 'number',
                vue: 'a-input-number',
                formType: 'number',
                placeholder: '请输入年龄'
            },
            {
                field: 'balance',
                sql: 'DECIMAL(10,2)',
                miaoma: 'MIAOMA_EXTENDED_MONEY',
                java: 'BigDecimal',
                typescript: 'number',
                vue: 'a-input-number',
                formType: 'number',
                placeholder: '账户余额'
            },
            {
                field: 'birthday',
                sql: 'DATE',
                miaoma: 'MIAOMA_BASE_DATE',
                java: 'LocalDate',
                typescript: 'string',
                vue: 'a-date-picker',
                formType: 'date',
                placeholder: '请选择生日'
            },
            {
                field: 'is_active',
                sql: 'TINYINT(1)',
                miaoma: 'MIAOMA_BASE_BOOLEAN',
                java: 'Boolean',
                typescript: 'boolean',
                vue: 'a-switch',
                formType: 'checkbox'
            },
            {
                field: 'avatar',
                sql: 'TEXT',
                miaoma: 'MIAOMA_BASE_TEXT',
                java: 'String',
                typescript: 'string',
                vue: 'a-textarea',
                formType: 'textarea',
                placeholder: '头像URL'
            },
            {
                field: 'created_at',
                sql: 'TIMESTAMP',
                miaoma: 'MIAOMA_BASE_TIMESTAMP',
                java: 'LocalDateTime',
                typescript: 'string',
                vue: 'a-date-picker',
                formType: 'datetime-local',
                readonly: true
            }
        ];

        let currentStep = 0;
        let demoInterval;

        function startDemo() {
            resetDemo();
            demoInterval = setInterval(() => {
                if (currentStep < 5) {
                    highlightStep(currentStep + 1);
                    currentStep++;
                    
                    if (currentStep === 3) {
                        populateMappingTable();
                    }
                    
                    if (currentStep === 5) {
                        generateUIPreview();
                        clearInterval(demoInterval);
                    }
                } else {
                    clearInterval(demoInterval);
                }
            }, 1500);
        }

        function resetDemo() {
            currentStep = 0;
            clearInterval(demoInterval);
            
            // 重置所有步骤高亮
            for (let i = 1; i <= 5; i++) {
                document.getElementById(`step${i}`).classList.remove('active');
            }
            
            // 清空表格和预览
            document.getElementById('mappingTableBody').innerHTML = '';
            document.getElementById('formPreview').innerHTML = '';
            document.getElementById('tablePreview').innerHTML = '';
        }

        function highlightStep(step) {
            // 移除之前的高亮
            for (let i = 1; i <= 5; i++) {
                document.getElementById(`step${i}`).classList.remove('active');
            }
            
            // 添加当前步骤高亮
            document.getElementById(`step${step}`).classList.add('active');
        }

        function populateMappingTable() {
            const tbody = document.getElementById('mappingTableBody');
            tbody.innerHTML = '';

            typeMappings.forEach((mapping, index) => {
                setTimeout(() => {
                    const row = tbody.insertRow();
                    row.innerHTML = `
                        <td><strong>${mapping.field}</strong></td>
                        <td><span class="type-badge mysql">${mapping.sql}</span></td>
                        <td><span class="type-badge miaoma">${mapping.miaoma}</span></td>
                        <td><span class="type-badge java">${mapping.java}</span></td>
                        <td><span class="type-badge ts">${mapping.typescript}</span></td>
                        <td><span class="type-badge vue">${mapping.vue}</span></td>
                    `;
                    row.style.opacity = '0';
                    row.style.transform = 'translateY(20px)';
                    
                    setTimeout(() => {
                        row.style.transition = 'all 0.5s ease';
                        row.style.opacity = '1';
                        row.style.transform = 'translateY(0)';
                    }, 50);
                }, index * 200);
            });
        }

        function generateUIPreview() {
            // 生成表单预览
            const formPreview = document.getElementById('formPreview');
            formPreview.innerHTML = '';

            typeMappings.forEach(mapping => {
                if (mapping.field === 'id' || mapping.field === 'created_at') return;

                const fieldDiv = document.createElement('div');
                fieldDiv.className = 'form-field';
                
                let inputHtml = '';
                if (mapping.formType === 'checkbox') {
                    inputHtml = `<input type="checkbox" id="${mapping.field}" checked>`;
                } else if (mapping.formType === 'textarea') {
                    inputHtml = `<textarea id="${mapping.field}" placeholder="${mapping.placeholder || ''}" rows="3"></textarea>`;
                } else {
                    inputHtml = `<input type="${mapping.formType}" id="${mapping.field}" placeholder="${mapping.placeholder || ''}" ${mapping.readonly ? 'readonly' : ''}>`;
                }

                fieldDiv.innerHTML = `
                    <label for="${mapping.field}">${getFieldLabel(mapping.field)}</label>
                    ${inputHtml}
                `;
                
                formPreview.appendChild(fieldDiv);
            });

            // 生成表格预览
            const tablePreview = document.getElementById('tablePreview');
            tablePreview.innerHTML = `
                <table>
                    <thead>
                        <tr>
                            ${typeMappings.slice(0, 6).map(m => `<th>${getFieldLabel(m.field)}</th>`).join('')}
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>user@example.com</td>
                            <td>13800138000</td>
                            <td>25</td>
                            <td>¥1,000.00</td>
                            <td>1990-01-01</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>test@demo.com</td>
                            <td>13900139000</td>
                            <td>30</td>
                            <td>¥2,500.50</td>
                            <td>1985-05-15</td>
                        </tr>
                    </tbody>
                </table>
            `;
        }

        function getFieldLabel(field) {
            const labels = {
                'id': 'ID',
                'email': '邮箱地址',
                'phone': '手机号码',
                'age': '年龄',
                'balance': '账户余额',
                'birthday': '生日',
                'is_active': '激活状态',
                'avatar': '头像',
                'created_at': '创建时间'
            };
            return labels[field] || field;
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 添加一些交互效果
            const steps = document.querySelectorAll('.flow-step');
            steps.forEach((step, index) => {
                step.addEventListener('click', function() {
                    highlightStep(index + 1);
                    
                    if (index + 1 >= 3) {
                        populateMappingTable();
                    }
                    
                    if (index + 1 >= 5) {
                        generateUIPreview();
                    }
                });
            });
        });
    </script>
</body>
</html>